<%@page language="java"  pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
    <title>约来约美 </title>
    <link rel="stylesheet" href="${static_host}style/jquery.mmenu-5.0.3.css" />
    <link rel="stylesheet" href="${static_host}style/hhframe-1.0.0.css" />
    <link rel="stylesheet" href="${static_host}style/discount.css" />
    <script src="${static_host}script/jquery-1.11.1.min.js"></script>
    <script src="${static_host}script/jquery.mmenu-5.0.3.js"></script>
    <script src="${static_host}script/jquery.iscroll.5.js"></script>
    <script src="${static_host}script/hhframe-1.0.0.js"></script>
    <script src="${static_host}script/discount.js?v=1"></script>
</head>
<body>
  <div class="framepage discount">
    
    <!-- header -->
    <div class="header Searcher">
      <h1 class="hd-title" style="text-align: center;">优惠活动</h1>
    </div>
    
    <!-- content -->
    <div class="wrapper">
    <div class="content">
    
      <ul class="cate">
      <li class="selected"><a href="javascript:;">限时特卖</a></li>
      <li><a href="javascript:;">免费试用装</a></li>
      <li><a href="javascript:;">优惠券</a></li>
      </ul>
      
      <div class="list">
        <ul id="discountpanel">
    
   <%--      <li>
          <a href="discountdetail.html" class="tag_discount">
          <img src="image/svc03.jpg" />
          <div>
          <p class="name">服务名称</p>
          <p class="info"><span>价格：600 元</span><span>59 人购买</span></p>
          <p class="shop">店铺：时尚来袭</p>
          <p class="addr">地址：浦东新区某某路某某号</p>
          <p class="time">有效期：5月3号 11:30-19:30</p>
          </div>
          </a>
        </li> --%>
       </ul>
        <ul>
            <li><a href="javascript:;" class="load_more"><p limit="1" class="load">加载更多</p><p class="state"></p></a></li>
        </ul>
      </div>
    
    </div>
    </div>
    
    <!-- footer -->
     <jsp:include page="/inc/discountfooter.jsp" />
    
    <!-- set city -->
    <div id="set_city">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">选择城市</h1>
      </div>
      
      <p class="tips">已开通服务的城市：</p>
      
      <div class="citys">
      <ul>
      <li><a href="javascript:;">北京市</a></li>
      <li><a href="javascript:;">成都市</a></li>
      <li class="selected"><a href="javascript:;">上海市</a></li>
      <li><a href="javascript:;">杭州市</a></li>
      <li><a href="javascript:;">天津市</a></li>
      <li><a href="javascript:;">广州市</a></li>
      <li><a href="javascript:;">深圳市</a></li>
      <li><a href="javascript:;">青岛市</a></li>
      <li><a href="javascript:;">南京市</a></li>
      <li><a href="javascript:;">三亚市</a></li>
      <li><a href="javascript:;">重庆市</a></li>
      <li><a href="javascript:;">北京市</a></li>
      <li><a href="javascript:;">天津市</a></li>
      <li><a href="javascript:;">广州市</a></li>
      <li><a href="javascript:;">深圳市</a></li>
      <li><a href="javascript:;">青岛市</a></li>
      <li><a href="javascript:;">南京市</a></li>
      <li><a href="javascript:;">三亚市</a></li>
      <li><a href="javascript:;">名字很长的城市</a></li>
      </ul>
      </div>
      
      </div>	
    </div>
    
    <!-- set chanel -->
    <div id="set_chanel">
      <div>
      
      <div class="header">
        <a href="javascript:;" class="pos-l icon hd-return">返回</a>
        <h1 class="hd-title">选择频道</h1>
      </div>
      
      <div class="chanels">
      <p class="cate hot">热门</p>
      <ul>
      <li><a href="javascript:;">频道 1</a></li>
      <li><a href="javascript:;">频道 2</a></li>
      <li><a href="javascript:;">频道 3</a></li>
      <li><a href="javascript:;">频道 2</a></li>
      <li><a href="javascript:;">频道 3</a></li>
      <li><p>fill stuff</p></li>
      </ul>
      <p class="cate liren">丽人</p>
      <ul>
      <li><a href="javascript:;">美容美体</a></li>
      <li class="selected"><a href="javascript:;">美发</a></li>
      <li><a href="javascript:;">美甲</a></li>
      </ul>
      </div>
      
      </div>
    </div>
  
  </div>
 <script src="${static_host}script/laytpl.js"></script>
  <script id="service" type="text/html">
	{{# for(var i = 0, len = d.length; i < len; i++){ }}
		<li>
          <a href="discount!detail.do?id={{d[i].id}}" class="tag_discount">
          <img src="{{d[i].pic}}" />
          <div>
          <p class="name">{{d[i].name}}</p>
          <p class="info"><span>价格：{{d[i].price}} 元</span><span>{{d[i].buyer_num}} 人购买</span></p>
          <p class="shop">店铺：{{d[i].store_name}}</p>
          <p class="addr">地址：{{d[i].address}}</p>
          <p class="time">有效期：{{d[i].timestr}}</p>
          </div>
          </a>
        </li>
{{# } }}
</script>

<script type="text/javascript">
var data=${jsonString};
function rederData(d){
    var gettpl = document.getElementById('service').innerHTML;
    laytpl(gettpl).render(d, function(html){
    	if(d.length==0){
    		//alert("数据全部加载完毕！");
    	}
        $("#discountpanel").append(html);
    
    });

}

$(function(){
	if(data.length==0){
		$("#contenbody").html('<div class="NoResult"><img src="icons/noresult.png" /><p>没有优惠信息</p> </div>');
	}else{
		 rederData(data);//渲染数据
	}
})

	
	

//=================================

</script>
</body>
</html>